<template>
  <div class="rating_page">
    <head-top :head-title="name" :go-back=true></head-top>
    <section class="header_img">
      <img :src="imgBaseUrl + image_path" class="food_img">
      <div class="cover"></div>
    </section>
    <p class="description">{{description}}</p>
    <section class="detail_container">
      <section class="detail_left">
        <p>{{name}}</p>
        <div class="rating_sale">
          <span>评分</span>
          <yd-rate slot="left" v-model='rating'></yd-rate>
          <span>{{rating.toFixed(1)}}</span>
        </div>
        <p>
          <span>月售 {{month_sales}}单</span>
          <span>售价 ¥{{foods.specfoods[0].price}}</span>
          <span v-if="foods.specfoods.length">起</span>
        </p>
        <p>
          <span>评论数 {{rating_count}}</span>
          <span>好评率 {{satisfy_rate}}%</span>
        </p>
      </section>
      <!-- <buy-cart :shopId='shopId'  :foods='foods' @moveInCart="$emit('moveInCart')"></buy-cart> -->
    </section>
  </div>
</template>

<script>
  import headTop from 'src/components/header/head'
  import {getImgPath} from 'src/components/common/mixin'
  import {imgBaseUrl} from 'src/config/env'

  export default {
    data(){
      return{
        image_path: null,
        description: null,
        month_sales: null,
        name: null,
        rating: null,
        rating_count: null,
        satisfy_rate: null,
        foods: null,
        shopId: null,
        imgBaseUrl,
      }
    },
    created(){
      this.image_path = this.$route.query.image_path;
      this.description = this.$route.query.description;
      this.month_sales = this.$route.query.month_sales;
      this.name = this.$route.query.name;
      this.rating =Math.floor(this.$route.query.rating) ;
      this.rating_count = this.$route.query.rating_count;
      this.satisfy_rate = this.$route.query.satisfy_rate;
      this.foods = this.$route.query.foods;
      this.shopId = this.$route.query.shopId;
    },
    mixins: [getImgPath],
    components: {
      headTop
    },
    props:[],
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../style/mixin';

 .header_img{
    position: relative;
    .food_img{
      width: 100%;
      display: block;
    }
    .cover{
      position: absolute;
      @include wh(100%, 100%);
      top: 0;
      left: 0;
    }
  }
  .description{
    @include sc(.6rem, #666);
    margin-top: .5rem;
    line-height: .8rem;
    bottom: .2rem;
    padding: 0 .4rem;
  }
  .detail_container{
    padding: .5rem;
    @include fj;
    align-items: center;
    .detail_left{
      p:nth-of-type(1){
        @include sc(.7rem, #333);
        margin-bottom: .2rem;
      }
      .rating_sale{
        display: flex;
        align-items: center;
        span:nth-of-type(1){
          @include sc(.6rem, #666);
          margin-right: .2rem;
        }
        span:nth-of-type(2){
          @include sc(.55rem, #f60);
          margin-left: .2rem;
        }
        span:nth-of-type(3){
          @include sc(.6rem, #666);
          margin-left: .4rem;
        }
      }
      p:nth-of-type(2){
        font-size: 0;
        margin-top: .3rem;
        span:nth-of-type(1){
          @include sc(.6rem, #666);
          margin-right: .4rem;
        }
        span:nth-of-type(2),span:nth-of-type(3){
          @include sc(.6rem, #f60);
          margin-right: .2rem;
        }
      }
      p:nth-of-type(3){
        span{
          @include sc(.6rem, #666);
        }
      }
    }
  }

</style>
